<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-form :model="searchParams" ref="searchParams" :inline="true">
          <el-form-item label="商品名称">
            <el-input class="input" v-model="searchParams.name" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="商品分类：">
            <el-select v-model="searchParams.cate" placeholder="请选择" clearable>
              <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动：">
            <el-select v-model="searchParams.activity" placeholder="请选择" clearable>
              <el-option v-for="item in activityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearch" type="primary" icon="el-icon-search"
              style="margin-left:40px">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="dataList" size='medium' border>
          <el-table-column width="80" label="ID" >
            <template slot-scope="{row, index}">
              <el-radio v-model="selectedItem" :label="row">{{ row.id }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="coverUrl" label="商品图片" show-overflow-tooltip>
            <template slot-scope="{row, index}"><img width="50" height="50" :src="row.coverUrl"></template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cateModel.name" label="商品分类" show-overflow-tooltip></el-table-column>
          <el-table-column prop="activityModel.name" label="活动" show-overflow-tooltip></el-table-column>
          <el-table-column prop="suggestSellingPrice" label="实际销售价" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sales" label="销量" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="销售状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>{{ formData.dicts.status[scope.row.status] }}</div>
              <div></div>
            </template>
          </el-table-column>
        </el-table>
        <pagination style="background: #ffffff; height: 50px" v-show="totalSize > 0" :total="totalSize"
          :page.sync="page" :limit.sync="size" @pagination="getDataList" />
      </el-col>

    </el-row>
  </div>
</template>

<script>
import { findItemListForC } from '@/api/merchant/item.js'
import { findActivityList } from '@/api/merchant/activity.js'
import {
  findCateList
} from '@/api/merchant/cate.js'
import { formData } from '@/views/merchant/item/data.js'
export default {
  data() {
    return {
      page: 1,
      size: 10,
      totalSize: 0,
      dataList: [],
      cateList: [],
      activityList: [],
      searchParams: {},
      url: '',
      formKey: '',
      formData,
      formOptions: {},
      dictOptions: {},
      formId: '',
      filter: {},
      itemFilter: '',
      selectedItem: {}
    }
  },
  created() {
    this.getDataList()
    this.findCateList()
    this.findActivityList()
  },
  methods: {
    handleSearch(searchParams) {
      // this.searchParams = Object.assign(this.filter, searchParams)
      this.page = 1
      var keys = Object.keys(this.searchParams)
      var filter = ''
      for (var key of keys) {
        if (key == 'cate' && this.searchParams['cate']) {
          filter = filter + key + '=' + this.searchParams[key] + '&'
        }
        if (key == 'activity' && this.searchParams['activity']) {
          filter = filter + key + '=' + this.searchParams[key] + '&'
        }
        if (key == 'name' && this.searchParams['name']) {
          filter = filter + key + '=' + this.searchParams[key] + '&'
        }
      }
      this.itemFilter = filter.substring(0, filter.length - 1)
      this.getDataList()
    },
    // 获取列表数据
    // 获取列表数据
    getDataList() {
      this.searchParams.page = this.page
      this.searchParams.size = this.size
      findItemListForC(this.searchParams).then(res => {
        if (res.data.code == 10000) {
          this.totalSize = res.data.data.total_count
          this.dataList = res.data.data.list
        }
      });
    },
    findCateList() {
      findCateList().then(res => {
        if (res.data.code == 10000) {
          this.cateList = res.data.data.list
        }
      });
    },
    findActivityList() {
      findActivityList().then(res => {
        if (res.data.code == 10000) {
          this.activityList = res.data.data.list
        }
      });
    },
  },
}
</script>
<style scoped lang='scss'></style>
